<template>
  <div>
    <el-group-title class="ccui-group-wrapper">
      <template slot="groupTitle">
        <div class="extend-btn">
          <el-button plain type="single-number" @click="chooseList">
            选择清单
          </el-button>
          <el-dropdown>
            <el-button plain type="single-number" style="width: 100px">
              <span style="transform: translateX(-8px)">批量设置</span
              ><i
                class="el-icon-arrow-down el-icon--right"
                style="transform: translateX(-6px)"
              />
            </el-button>
            <el-dropdown-menu slot="dropdown" class="plDropDown">
              <el-dropdown-item
                @click.native="plSet('time')"
                :disabled="plbutton"
                >交货时间</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="plSet('address')"
                :disabled="plbutton"
                >交货地点</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="plSet('factory')"
                :disabled="plbutton"
                >生产厂家/品牌</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="plSet('person')"
                :disabled="plbutton"
                >收货人</el-dropdown-item
              ><el-dropdown-item
                @click.native="plSet('phone')"
                :disabled="plbutton"
                >收货人电话</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <el-button plain type="single-number" @click="handleCopyData">
            复制行
          </el-button>
          <el-button plain type="single-number" @click="openDelete">
            删除行
          </el-button>
        </div>
        <div class="ccui-multifunctional-table-wrapper">
          <ux-grid
            ref="multifunctionalList"
            :data="tableData"
            style="margin-bottom: 20px; width: 100%"
            class="ccui-form-child-table"
            :highlightCurrentRow="false"
            :widthResize="true"
            :cell-style="cellStyle"
            @select-all="handleCheckAllChange"
            @select="handleCheckChange"
            @cell-click="handleAddress"
            :header-cell-class-name="must"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
            show-overflow="title"
            :max-height="500"
          >
            <ux-table-column type="checkbox" width="55" fixed="left" />
            <ux-table-column
              title="序号"
              type="index"
              min-width="50"
              fixed="left"
            />
            <ux-table-column
              show-overflow-tooltip
              field="materialsCode"
              title="设备物资编码"
              min-width="110"
              fixed="left"
            >
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="materialsName"
              title="设备物资名称"
              min-width="300"
              fixed="left"
            >
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="matDescribe"
              title="设备物资说明"
              min-width="130"
            >
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="thirdCategoriesOfName"
              title="分类名称"
              width="130"
            >
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="currentMeasuringUnit"
              title="计量单位"
              width="90"
            >
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="currentNum"
              title="数量"
              min-width="140"
              :edit-render="{ autofocus: '.el-input__inner' }"
            >
              <template v-slot:edit="scope">
                <el-input
                  class="currentNumClass"
                  v-model="scope.row.currentNum"
                  placeholder="请输入数量"
                  @keyup.native="scope.row.currentNum = oninput(scope.row)"
                  @input="handleInput(scope.row)"
                  @blur="testColumn($event, scope.row, 'blur', 'currentNum')"
                  @focus="testColumn($event, scope.row, 'blur', 'currentNum')"
                />
              </template>
              <template v-slot="scope">
                <span class="my-input-sc span-input">{{
                  scope.row.currentNum
                }}</span>
              </template>
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="deliveryTime"
              title="交货时间"
              min-width="180"
            >
              <template v-slot:default="scope">
                <el-date-picker
                  v-model="scope.row.deliveryTime"
                  type="date"
                  style="width:150px"
                  placeholder="请选择日期"
                  value-format="yyyy-MM-dd"
                  @input="handleInput(scope.row)"
                ></el-date-picker>
              </template>
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="listAddress"
              title="交货地点"
              min-width="220"
            >
              <template v-slot:default="scope">
                <!--                <el-input v-model="scope.row.deliveryPoints" readonly />-->
                <span>{{ scope.row.listAddress }}</span>
              </template>
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="manufacturer"
              title="生产厂家/品牌"
              min-width="260"
            >
              <template v-slot:default="scope">
                <el-input
                  class="input-readonly"
                  show-overflow-tooltip
                  v-model="scope.row.manufacturer"
                  readonly
                  clearable
                  @input="handleInput(scope.row)"
                  style="width: 145px;"
                  @blur="testColumn($event, scope.row, 'blur', 'manufacturer')"
                >
                </el-input>
                <el-button
                  plain
                  type="single-number-filleted"
                  style="margin-left: 10px"
                  @click="openSmallDialog(scope.row)"
                  >选择</el-button
                >
              </template>
            </ux-table-column>
            <ux-table-column
              show-overflow-tooltip
              field="consignee"
              title="收货人"
              min-width="150px"
            >
              <template v-slot:default="scope">
                <el-input
                  v-model="scope.row.consignee"
                  placeholder="请输入收货人"
                  maxlength="20"
                  @input="handleInput(scope.row)"
                  @blur="testColumn($event, scope.row, 'blur', 'consignee')"
                  @focus="testColumn($event, scope.row, 'blur', 'consignee')"
                  show-word-limit
                />
              </template>
            </ux-table-column>
            <ux-table-column
              :show-overflow-tooltip="true"
              field="consigneePhone"
              title="收货人电话"
              min-width="200px"
            >
              <template v-slot:default="scope">
                <el-input
                  v-model="scope.row.consigneePhone"
                  placeholder="请输入收货人电话"
                  maxlength="15"
                  @input="handleInput(scope.row)"
                  @blur="
                    testColumn($event, scope.row, 'blur', 'consigneePhone')
                  "
                  @focus="
                    testColumn($event, scope.row, 'blur', 'consigneePhone')
                  "
                  show-word-limit
                />
              </template>
            </ux-table-column>
            <ux-table-column field="remark" title="备注" width="200px">
              <template v-slot:default="scope">
                <el-input
                  v-model="scope.row.remark"
                  placeholder="请输入备注"
                  maxlength="500"
                  @input="handleInput(scope.row)"
                  show-word-limit
                >
                </el-input>
              </template>
            </ux-table-column>
          </ux-grid>
        </div>
      </template>
    </el-group-title>
    <tableDialogNew
      @getDialogRight="getDialogRight"
      ref="contractDialog"
      :concId="concId"
      :clearTableList="clearTableList"
    ></tableDialogNew>
    <el-dialog
      title="批量设置"
      :visible.sync="dialogFormVisible"
      class="plClass"
      :before-close="handleDialogNotSure"
      v-if="dialogFormVisible"
    >
      <el-form
        :model="formPl"
        :rules="rules"
        ref="PlForm"
        label-width="144px"
        @submit.native.prevent
      >
        <div v-if="plMode === 'time'">
          <el-form-item label="交货时间：" :label-width="formLabelWidth">
            <el-date-picker
              v-model="formPl.deliveryTime"
              type="date"
              placeholder="请选择交货时间"
              value-format="yyyy-MM-dd"
              autocomplete="off"
            />
          </el-form-item>
        </div>
        <div v-else-if="plMode === 'address'">
          <el-form-item label="交货地点：" :label-width="formLabelWidth">
            <el-select
              class="area-select"
              v-model="formPl.deliveryAreaName"
              placeholder="请选择地区"
              @change="handleChange('deliveryArea')"
            >
              <el-option
                v-for="item in deliveryAreaOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
            <el-select
              class="area-select"
              v-model="formPl.provinceName"
              placeholder="请选择省份"
              @change="handleChange('province')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-select
              class="area-select"
              v-model="formPl.cityName"
              placeholder="请选择市"
              @change="handleChange('city')"
            >
              <el-option
                v-for="item in cityOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
            <el-select
              class="area-select"
              v-model="formPl.countyName"
              placeholder="请选择县"
              @change="handleChange('county')"
            >
              <el-option
                v-for="item in countyOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-input
              v-model.trim="formPl.deliveryPoints"
              placeholder="请输入详细地址"
              style="width: 340px"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </div>
        <div v-else-if="plMode === 'person'">
          <el-form-item label="收货人：" :label-width="formLabelWidth">
            <el-input
              v-model="formPl.consignee"
              autocomplete="off"
              placeholder="请输入收货人"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
        </div>
        <div v-else-if="plMode === 'phone'">
          <el-form-item
            label="收货人电话："
            :label-width="formLabelWidth"
            prop="consigneePhone"
          >
            <el-input
              maxlength="15"
              show-word-limit
              v-model.number="formPl.consigneePhone"
              autocomplete="off"
              placeholder="请输入收货人电话"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="handleDialogNotSure"
          >取 消
        </el-button>
        <el-button
          size="mini"
          type="primary-font-mini"
          @click="handleDialogSure"
          >确 定
        </el-button>
      </div>
      <el-button type="text" @click="open"></el-button>
    </el-dialog>
    <addressSettings
      ref="addressSetting"
      dialogTitle="交货地点"
      :isSelect="!!listTableData.length"
      :selectTableList="listTableData"
      @ok="handlerChange"
    ></addressSettings>
    <chooseStatementAll
      ref="chooseStatementAll"
      :contractCode="contractCode"
      @ok="changeBrandAll"
    >
    </chooseStatementAll>
    <chooseStatement
      ref="chooseStatement"
      :contractCode="contractCode"
      @getVal="dialogVal(scope.row)"
      @ok="handleBrand(arguments)"
    ></chooseStatement>
  </div>
</template>

<script>
import axios from "axios";
import { addUrlPerFix } from "@/basa/utils/index";
import flexColumnWidth from "@/basa/mixins/flexColumnWidth";
// import incss from "umy-ui/lib/theme-chalk/index.css";
import { getQryAreaAddress } from "@/basa/api";
import { getRegion, listSmpBrandRelation } from "../api/orderEntry";
// import tableDialog from "./contractDialog.vue";
import tableDialogNew from "./contractDialogNew.vue";
import addressSettings from "./addressSettings";
import chooseStatement from "./chooseStatement";
import chooseStatementAll from "./chooseStatementAll";
// import {swapItems} from "../../../../basa/utils";
import { formatNumber } from "@/basa/utils/index";
// import {initMcConcMeasureBasic} from "../../../acceptanceManagement/arrivalAcceptance/api/add-item";

export default {
  name: "tableList",
  mixins: [flexColumnWidth],
  components: {
    // tableDialog,
    tableDialogNew,
    addressSettings,
    chooseStatement,
    chooseStatementAll
  },
  props: {
    concId: Number,
    clearTableList: Number
  },
  watch: {
    clearTableList(item) {
      this.tableData = [];
    },
    copyData: {
      handler(data) {
        if (data.length > 0) {
          data.forEach(item => {
            if (
              item.thirdCategoriesOfCode.substring(0, 2) !==
              data[0].thirdCategoriesOfCode.substring(0, 2)
            ) {
              this.plButtonBrand = true;
              return false;
            } else {
              this.plButtonBrand = false;
              let list = [];
              data.forEach(e => {
                list.push(e.pcConcId);
              });
              this.$refs["chooseStatementAll"].matLessList = list;
            }
          });
        } else {
          this.$refs["chooseStatementAll"].matLessList = [];
        }
        console.log("传参列表", this.$refs["chooseStatementAll"].matLessList);
      },
      deep: true
    },
    tableData: {
      handler(data) {
        if (this.tableData.length) {
          this.$emit("postTableData", data[0]);
          this.plbutton = false;
        } else {
          this.plbutton = true;
        }
      },
      deep: true
    }
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      console.log("输入的手机号", value);
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        // const reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        const reg = /^\d{11,}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      isOverseasTrue: false,
      plbutton: true,
      plButtonBrand: true,
      contractCode: "",
      setType: "",
      chooseBtnflag: true,
      plMode: "",
      flag: false,
      form: {},
      tableData: [],
      copyData: [],
      deleteData: [],
      listTableData: [],
      deliveryAreaOptions: [],
      provinceOptions: [],
      cityOptions: [],
      countyOptions: [],
      areaArr: ["deliveryArea", "province", "city", "county"],
      compileUser: "", // 编制人
      compileUserMobile: "", // 编制人手机号
      // 省市区
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          if (node.level === 0) {
            getRegion({
              parentCode: null,
              overseasFlag: 0
            }).then(res => {
              const cities = res.data.data.map((value, i) => ({
                value: value.addressCode,
                label: value.addressName,
                leaf: false
              }));
              resolve(cities);
            });
          }
          if (node.level >= 1) {
            getRegion({
              parentCode: node.value,
              overseasFlag: 0
            }).then(res => {
              const areas = res.data.data.map((value, i) => {
                return {
                  value: value.addressCode,
                  label: value.addressName,
                  leaf: !(value.lastFlag === 0)
                };
              });
              resolve(areas);
            });
          }
        }
      },
      formPl: {},
      formLabelWidth: "120px",
      formLabelWidth1: "240px",
      dialogFormVisible: false,
      rules: {
        consigneePhone: [
          { validator: checkPhone, required: true, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getUserInfo() {
      console.log("11111111111111111", this.compileUser);
      axios
        .post(
          addUrlPerFix(process.env.VUE_APP_BASEP_URL) +
            "/apis/basap/getUserInfo",
          {}
        )
        .then(res => {
          console.log(
            222222222222222222222222222222222222222222222222222222222,
            res
          );
          // this.form.compileUserId = 取登陆人Id
          this.compileUser = res.data.data.userInfo.name;
          this.compileUserMobile = res.data.data.userInfo.mobile;
          console.log("??", this.compileUser);
        });
    },
    // 更改生产厂家品牌
    openSmallDialog(val) {
      console.log("打印生产厂家数据", val);
      this.$refs["chooseStatement"].rowDetail = val;
      this.$refs["chooseStatement"].dialogFormVisible = true;
    },
    // chooseBrand(row) {
    //   this.$refs["chooseBrand"].dialogFormVisible = true;
    // },
    // 下拉选择触发事件
    handleChange(type) {
      console.log("点击下拉框");
      const tempCode = this[`${type}Options`].find(
        _ => _.addressAbbr === this.formPl[`${type}Name`]
      ).addressCode;
      console.log("点击下拉框", type);

      // if (type === this.areaArr[0]) {
      //   this.form[`${type}Code`] = tempCode;
      // } else {
      //   this.form[`${type}`] = tempCode;
      // }
      if (type === "deliveryArea") {
        this.formPl[`${type}Code`] = tempCode;
        this.formPl.provinceName = "";
        this.formPl.cityName = "";
        this.formPl.countyName = "";
      } else {
        this.formPl[`${type}`] = tempCode;
      }

      if (type === "province") {
        this.formPl.cityName = "";
        this.formPl.countyName = "";
        this.countyOptions = [];
      }
      if (type === "city") {
        this.formPl.countyName = "";
      }
      this.$forceUpdate();
      this.getQryAreaAddress(tempCode, type);
    },
    // 获取地点
    getQryAreaAddress(parentCode = null, branch = "deliveryArea") {
      const data = { parentCode, overseasFlag: 0 };
      getQryAreaAddress(data).then(res => {
        if (res.data.code === "0") {
          if (parentCode == null) {
            this.deliveryAreaOptions = res.data.data;
          } else {
            this[
              `${
                this.areaArr[this.areaArr.findIndex(_ => _ === branch) + 1]
              }Options`
            ] = res.data.data;
          }
        }
      });
    },
    oninput(row) {
      console.log(1112222, row);
      //      debugger
      //正则替换
      //后来调试发现这个函数只能用于字符串，当是数字的时候就会报此错误
      var str = row.currentNum.toString();
      str = str.replace(/[^\d.]/g, ""); // 保留数字   /[^\d.]/g, ""
      str = str.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      str = str
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      return str;
    },

    // 批量设置确认框
    open() {
      this.$confirm("您确定要设置全部数据吗？", "批量设置", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "ccui-message-box-custom"
      })
        .then(() => {
          this.tableData.forEach(item => {
            console.log("开始批量设置", this.tableData, this.formPl);
            if (this.formPl.deliveryTime) {
              this.$set(item, "deliveryTime", this.formPl.deliveryTime);
              this.tableData.splice(0, 0);
              this.$forceUpdate();
              this.dialogFormVisible = false;
            }
            if (this.formPl.consignee) {
              this.$set(item, "consignee", this.formPl.consignee);
              this.tableData.splice(0, 0);
              this.$forceUpdate();
              this.dialogFormVisible = false;
            }
            if (this.formPl.consigneePhone) {
              this.$refs["PlForm"].validate(valid => {
                if (valid) {
                  this.$set(item, "consigneePhone", this.formPl.consigneePhone);
                  this.tableData.splice(0, 0);
                  this.$forceUpdate();
                  this.dialogFormVisible = false;
                } else {
                  return false;
                }
              });
            }
            if (
              this.formPl.deliveryAreaName &&
              this.formPl.provinceName &&
              this.formPl.deliveryPoints
            ) {
              item.city = this.formPl.city;
              item.cityName = this.formPl.cityName;
              item.county = this.formPl.county;
              item.countyName = this.formPl.countyName;
              item.deliveryAreaCode = this.formPl.deliveryAreaCode;
              item.deliveryAreaName = this.formPl.deliveryAreaName;
              item.deliveryPoints = this.formPl.deliveryPoints;
              item.province = this.formPl.province;
              item.provinceName = this.formPl.provinceName;
              let listAddress =
                item.deliveryAreaName +
                item.provinceName +
                item.cityName +
                item.countyName +
                item.deliveryPoints;
              this.$set(item, "listAddress", listAddress);
              this.tableData.splice(0, 0);
              this.$forceUpdate();
              this.dialogFormVisible = false;
            }
          });
          this.dialogFormVisible = false;
          this.formPl = {};
        })
        .catch(action => {
          this.dialogFormVisible = true;
        });
    },
    dialogVal(val) {
      console.log(
        "传给选择品牌的参数",
        val,
        this.contractCode,
        "val.firstCategoriesOfCode",
        val.firstCategoriesOfCode,
        "val.thirdCategoriesOfCode",
        val.thirdCategoriesOfCode
      );
      this.$refs["chooseStatement"].contractCode = this.contractCode;
      // this.$refs["chooseStatement"].setType = val.id;
      this.$refs["chooseStatement"].id = val.pcConcId;
      // this.init(val.pcConcId);
    },
    // 初始化列表
    init(val) {
      // let list = [];
      // list.push(val)
      let params = {
        concMatLessListId: val,
        contractCode: this.contractCode
      };
      console.log("单条查询品牌接口入参", params);
      listSmpBrandRelation(params)
        .then(res => {
          console.log("查询该类别接口返回的数据", res.data.data);
          // this.$nextTick(() => {
          setTimeout(() => {
            this.$refs["chooseStatement"].tableDataList = res.data.data;
            // this.$set(this.tableData, res.data.data);

            console.log(
              "1表格里应该出现的数据1",
              this.$refs["chooseStatement"].tableDataList
            );
          }, 1000);
          // });
        })
        .catch(e => {
          console.log(e);
        });
      // this.$emit("autocompleteSelect", val);
    },
    // 单行选中更改
    handleBrand(data) {
      console.log("保存的数据", data);
      let val = data[0];
      let row = data[1];
      console.log("多选的厂牌数据", val, "这一行的数据", row);
      this.tableData.forEach(i => {
        if (i.only === row.only) {
          let str = "";
          val.forEach(o => {
            if (o.manufacturerName && o.brandName) {
              str = str + o.manufacturerName + "/" + o.brandName;
            } else if (o.manufacturerName || o.brandName) {
              str = str + o.manufacturerName + "/" + o.brandName;
            }
            str += ",";
          });
          i.manufacturer = str.substring(0, str.length - 1);
          i.smpBrandRelationReqBOS = val;
        }
      });
    },
    // 多行选中更改
    changeBrandAll(data) {
      console.log("多行更改的数据", data, "选中的行:", this.copyData);
      if (this.copyData.length === 0) {
        this.$confirm("您确定要设置全部数据吗？", "批量设置", {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "ccui-message-box-custom"
        })
          .then(() => {
            this.tableData.forEach(item => {
              console.log("开始批量设置全部");
              this.tableData.forEach(i => {
                let str = "";
                data.forEach(e => {
                  if (e.manufacturerName && e.brandName) {
                    str = str + e.manufacturerName + "/" + e.brandName;
                  } else if (e.manufacturerName || e.brandName) {
                    str = str + e.manufacturerName + "/" + e.brandName;
                  }
                  str += ",";
                });
                console.log("选择的品牌", str);
                i.manufacturer = str.substring(0, str.length - 1);
                i.smpBrandRelationReqBOS = data;
              });
            });
            this.$refs.chooseStatementAll.handleReset();
            console.log(7777);
            this.$nextTick(() => {
              this.$refs.chooseStatementAll.dialogFormVisible = false;
            });
          })
          .catch(action => {
            console.log(8888);
            this.$refs.chooseStatementAll.dialogFormVisible = true;
          });
      } else {
        this.tableData.forEach(i => {
          this.copyData.forEach(o => {
            if (i.only === o.only) {
              let str = "";
              data.forEach(e => {
                if (e.manufacturerName && e.brandName) {
                  str = str + e.manufacturerName + "/" + e.brandName;
                } else if (e.manufacturerName || e.brandName) {
                  str = str + e.manufacturerName + "/" + e.brandName;
                }
                str += ",";
              });
              console.log("选择的品牌", str);
              i.manufacturer = str.substring(0, str.length - 1);
              i.smpBrandRelationReqBOS = data;
            }
          });
        });
        this.$refs.chooseStatementAll.handleReset();
        this.$refs.chooseStatementAll.dialogFormVisible = false;
      }
    },
    // 列表必选项
    must(obj) {
      if (
        obj.column.title == "数量" ||
        obj.column.title == "交货地点" ||
        obj.column.title == "交货时间" ||
        obj.column.title == "生产厂家/品牌" ||
        obj.column.title == "收货人" ||
        obj.column.title == "收货人电话"
      ) {
        return "must";
      }
    },

    // 列表行内样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log("colume111", column);
      if (["交货地点"].includes(column.title)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },
    handleAddress(row, column) {
      console.log("点击触发地址弹框", row, column);
      if (column.title === "交货地点")
        this.$refs["addressSetting"].handleClick(row);
    },
    // 表格input校验
    testColumn(e, row, eventType, nameModel) {
      console.log("input校验？", nameModel);
      let pattern = /^\d*\.?\d*$/;
      if (eventType == "blur") {
        row[nameModel]
          ? (e.target.style.border = "1px solid #ccc")
          : (e.target.style.border = "1px solid red");
      } else if (eventType == "focus") {
        e.target.style.border = "1px solid #0089EF";
      } else {
        console.log("error");
      }
      if (nameModel === "currentNum") {
        row[nameModel] = formatNumber(row[nameModel], 3);
        console.log("当前行数量", row[nameModel]);
        let reg = /^\d*\.?\d*$/;
        if (reg.test(row[nameModel])) {
          const arr = row[nameModel].split(".");
          console.log("截取小数点前", arr, arr.length, row[nameModel].length);
          if (arr.length == 2 && arr[0].length > 12) {
            this.$message.warning("整数最多可以输入12位");
            row[nameModel] = row[nameModel].substr(0, 12);
          }
        }
        row[nameModel] = formatNumber(row[nameModel], 3);

        if (!pattern.test(row[nameModel])) {
          console.log(row[nameModel]);
          // let str = row[nameModel];
          // row[nameModel] = formatNumber(row[nameModel], 3);
        }
      }

      if (nameModel == "consigneePhone") {
        console.log("手机号位数", row[nameModel]);
        if (row[nameModel]) {
          const reg = /^\d{11,}$/;
          reg.test(row[nameModel])
            ? (e.target.style.border = "1px solid #ccc")
            : (e.target.style.border = "1px solid red");
          // if (!reg.test(row[nameModel])){
          //   this.$showErrorMessage("请输入正确的收货人电话")
          // }
        }
      }
    },
    // 输入框更改时 更新选中数据
    handleInput(r) {
      console.log("输入框数据", r.consigneePhone);
      if (r.consigneePhone) {
        r.consigneePhone = r.consigneePhone.replace(/^(0+)|[^\d]+/g, "");
      }
      console.log("比对正则后的手机号", r.consigneePhone);
      this.copyData.map((e, i) => {
        if (e.only === r.only) {
          // currentNum deliveryTime region deliveryPoints manufacturer consignee consigneePhone remark this.$refs['myCas' + i]
          e.currentNum = r.currentNum;
          e.deliveryTime = r.deliveryTime;
          e.deliveryPoints = r.deliveryPoints;
          e.manufacturer = r.manufacturer;
          e.consignee = r.consignee;
          e.consigneePhone = r.consigneePhone;
          e.remark = r.remark;
        }
      });
    },
    // 全选调用单选方法
    handleCheckAllChange(data) {
      this.handleCheckChange(data);
    },
    // 单选数据
    handleCheckChange(selection, row) {
      this.copyData = JSON.parse(JSON.stringify(selection));
    },
    // 批量设置弹框确定
    handleDialogSure() {
      console.log("当前", this.formPl);
      if (Object.keys(this.formPl).length !== 0) {
        if (
          !this.formPl.deliveryAreaName &&
          !this.formPl.provinceName &&
          !this.formPl.cityName &&
          !this.formPl.countyName &&
          !this.formPl.deliveryPoints
        ) {
          console.log("地点全空");
          if (this.copyData.length === 0) {
            console.log("修改全部数据", this.tableData, this.formPl);
            this.$refs["PlForm"].validate(valid => {
              console.log(valid);
              if (valid) {
                if (this.tableData.length === 0) {
                  console.log("暂无可更改的数据");
                  this.$message({
                    message: "暂无可更改的数据",
                    duration: 2000,
                    type: "warning"
                  });
                } else {
                  this.open();
                }
              } else {
                return false;
              }
            });
          } else {
            console.log("修改选中", this.copyData, this.tableData);
            this.copyData.map(e => {
              this.tableData.map((i, index) => {
                if (e.only === i.only) {
                  console.log("执行设置", this.formPl);

                  // 数据赋值
                  if (this.formPl.deliveryTime) {
                    this.$set(i, "deliveryTime", this.formPl.deliveryTime);
                    this.tableData.splice(0, 0);
                    this.$forceUpdate();
                    this.dialogFormVisible = false;
                  }
                  if (this.formPl.consignee) {
                    this.$set(i, "consignee", this.formPl.consignee);
                    this.tableData.splice(0, 0);
                    this.$forceUpdate();
                    this.dialogFormVisible = false;
                  }
                  if (this.formPl.consigneePhone) {
                    this.$refs["PlForm"].validate(valid => {
                      if (valid) {
                        this.$set(
                          i,
                          "consigneePhone",
                          this.formPl.consigneePhone
                        );
                        this.tableData.splice(0, 0);
                        this.$forceUpdate();
                        this.dialogFormVisible = false;
                      } else {
                        return false;
                      }
                    });
                  }
                  if (
                    this.formPl.deliveryAreaName &&
                    this.formPl.provinceName &&
                    this.formPl.cityName &&
                    this.formPl.countyName &&
                    this.formPl.deliveryPoints
                  ) {
                    i.city = this.formPl.city;
                    i.cityName = this.formPl.cityName;
                    i.county = this.formPl.county;
                    i.countyName = this.formPl.countyName;
                    i.deliveryAreaCode = this.formPl.deliveryAreaCode;
                    i.deliveryAreaName = this.formPl.deliveryAreaName;
                    i.deliveryPoints = this.formPl.deliveryPoints;
                    i.province = this.formPl.province;
                    i.provinceName = this.formPl.provinceName;
                    let listAddress =
                      i.deliveryAreaName +
                      i.provinceName +
                      i.cityName +
                      i.countyName +
                      i.deliveryPoints;
                    this.$set(i, "listAddress", listAddress);
                    this.tableData.splice(0, 0);
                    this.$forceUpdate();
                  }
                }
              });
            });
          }
        } else if (
          this.formPl.deliveryAreaName &&
          this.formPl.provinceName &&
          this.formPl.cityName &&
          this.formPl.deliveryPoints
        ) {
          console.log("地点全有");
          if (this.copyData.length === 0) {
            console.log("修改全部数据", this.tableData, this.formPl);
            this.open();
          } else {
            console.log("修改选中", this.copyData, this.tableData);
            this.copyData.map(e => {
              this.tableData.map((i, index) => {
                if (e.only === i.only) {
                  console.log("执行设置", this.formPl);
                  // 数据赋值
                  if (this.formPl.deliveryTime) {
                    this.$set(i, "deliveryTime", this.formPl.deliveryTime);
                  }
                  if (this.formPl.consignee) {
                    this.$set(i, "consignee", this.formPl.consignee);
                  }
                  if (this.formPl.consigneePhone) {
                    this.$set(i, "consigneePhone", this.formPl.consigneePhone);
                  }
                  if (
                    this.formPl.deliveryAreaName &&
                    this.formPl.provinceName &&
                    this.formPl.cityName &&
                    this.formPl.deliveryPoints
                  ) {
                    i.city = this.formPl.city;
                    i.cityName = this.formPl.cityName;
                    i.county = this.formPl.county;
                    i.countyName = this.formPl.countyName;
                    i.deliveryAreaCode = this.formPl.deliveryAreaCode;
                    i.deliveryAreaName = this.formPl.deliveryAreaName;
                    i.deliveryPoints = this.formPl.deliveryPoints;
                    i.province = this.formPl.province;
                    i.provinceName = this.formPl.provinceName;
                    let listAddress =
                      i.deliveryAreaName +
                      i.provinceName +
                      i.cityName +
                      i.countyName +
                      i.deliveryPoints;
                    this.$set(i, "listAddress", listAddress);
                    this.tableData.splice(0, 0);
                    this.$forceUpdate();
                  }
                }
              });
            });
          }
          this.dialogFormVisible = false;
        } else {
          this.$message({
            message: "请选择完整的交货地点",
            type: "error",
            duration: 2000,
            ccuiCustom: true
          });
        }
      } else {
        this.handleDialogNotSure();
      }
    },
    // 批量设置弹框取消
    handleDialogNotSure() {
      // this.$refs["PlForm"].resetFields();
      this.formPl = {};
      this.dialogFormVisible = false;
    },
    // 选择地点
    handlerChange(val) {
      this.$forceUpdate();
      this.tableData.map(item => {
        if (item.only === val.changeOnly) {
          item.deliveryAreaName = val.deliveryAreaName;
          item.provinceName = val.provinceName;
          item.cityName = val.cityName;
          item.countyName = val.countyName;
          item.deliveryPoints = val.deliveryPoints;
          if (val.city) {
            item.city = val.city;
          }
          if (val.county) {
            item.county = val.county;
          }
          if (val.province) {
            item.province = val.province;
          }
          if (val.deliveryAreaCode) {
            item.deliveryAreaCode = val.deliveryAreaCode;
          }
          let listAddress =
            val.deliveryAreaName +
            val.provinceName +
            val.cityName +
            val.countyName +
            val.deliveryPoints;
          // item.listAddress = item.listAddress.replace(/undefined/gi, "");
          console.log(listAddress);
          this.$set(item, "listAddress", listAddress);
          this.tableData.splice(0, 0);
          this.$forceUpdate();
        }
      });
    },

    // 删除操作
    openDelete() {
      if (!this.copyData.length) {
        this.$showErrorMessage("未选中复选框");
        // this.$message({
        //   message: "未选中复选框",
        //   type: "error",
        //   duration: 2000,
        //   ccuiCustom: true
        // });
        return;
      } else {
        this.$confirm("您确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.handleDelete();
          })
          .catch(action => {
            console.log(action);
          });
      }
    },
    handleDelete() {
      let a = this.copyData.map(e => {
        return e.only;
      });
      this.tableData = this.tableData.filter(i => {
        return !a.includes(i.only);
      });
      this.copyData = [];
      this.$message({
        message: "删除成功",
        type: "success",
        duration: 2000,
        ccuiCustom: true
      });
    },

    // 复制操作
    handleCopyData() {
      if (!this.copyData.length) {
        this.$showErrorMessage("未选中复选框");
        return;
      } else {
        // this.flag = true;
        // 拷贝this.copyData, 防止修改data时, 影响到copyData
        let data = JSON.parse(JSON.stringify(this.copyData));
        console.log("复制了那些行", data);
        this.getDialogRight(data, 2);
        this.copyData = [];
        this.$refs.multifunctionalList.clearSelection();
      }
    },

    // 清单弹框确定传过来数据
    //  新增：type === 1 ，复制：type === 2
    getDialogRight(data, type) {
      console.log("传过来的数据", data, type);
      // data 数据
      data.map((e, i) => {
        e.only = this.generateUUID();
        // e.pcConcId = e.firstId;
        e.companyOrgId = e.orgId;
        // e.currentNum = formatNumber(e.currentNum, 3);
        // e.currentNum = "";
        if (type === 1) {
          e.consignee = this.compileUser;
          e.consigneePhone = this.compileUserMobile;
          e.currentNum = "";
        } else {
          e.currentNum = formatNumber(e.currentNum, 3);
        }
        this.tableData.push({ ...e });
        console.log("表格数据", this.tableData);
      });
      this.$refs["contractDialog"].dialogTableVisibleTextarea = false;
    },
    // 表格省市区change
    handlerCascaderChange(data, r, i) {
      setTimeout(() => {
        this.$nextTick(() => {
          this.getLabelValue(data, r, i);
        });
      }, 100);
    },
    getLabelValue(data, r, i) {
      if (data) {
        let valuePlaceArr = this.$refs["myCas" + i].inputValue
          ? this.$refs["myCas" + i].inputValue.split("/")
          : "";
        // 省市区Code 入参使用
        r.deliveryAreaCode = data[0] || "";
        r.province = data[1] || "";
        r.city = data[2] || "";
        r.county = data[3] || "";
        // 省市区Name 入参使用
        r.deliveryAreaName = valuePlaceArr[0] || "";
        r.provinceName = valuePlaceArr[1] || "";
        r.cityName = valuePlaceArr[2] || "";
        r.countyName = valuePlaceArr[3] || "";

        // copyData 省市区改变再次复制处理
        this.copyData.map((e, i) => {
          if (e.only === r.only) {
            e.deliveryAreaCode = data[0] || "";
            e.province = data[1] || "";
            e.city = data[2] || "";
            e.county = data[3] || "";
            // 省市区Name 入参使用
            e.deliveryAreaName = valuePlaceArr[0] || "";
            e.provinceName = valuePlaceArr[1] || "";
            e.cityName = valuePlaceArr[2] || "";
            e.countyName = valuePlaceArr[3] || "";
          }
        });
      }
    },
    // 下拉框 出现/隐藏 触发 - Boolean
    cascaderShow(data, row, i) {
      console.log(data);
      setTimeout(() => {
        this.handleCascaderShow(this.tableData, data, row, i);
      }, 500);
    },
    // 省市区回显赋值
    handleCascaderShow(arr, data, row, i) {
      arr.map(e => {
        if (!data && e.only === row.only) {
          if (e.deliveryAreaName && e.cityName) {
            let regionArr = [
              e.deliveryAreaName,
              e.provinceName,
              e.cityName,
              e.countyName
            ];
            this.$nextTick(() => {
              this.$refs["myCas" + i].inputValue = regionArr.join("/");
            });
          } else if (e.deliveryAreaName && !e.cityName) {
            this.$nextTick(() => {
              let regionArr = [
                e.deliveryAreaName,
                e.provinceName,
                e.cityName,
                e.countyName
              ];
              this.$refs[
                "myCas" + i
              ].inputValue = `${regionArr[0]}/${regionArr[1]}`;
            });
          } else {
            this.$nextTick(() => {
              this.$refs["myCas" + i].inputValue = "";
            });
          }
        }
      });
    },
    // 批量设置打开
    plSet(val) {
      if (val == "factory") {
        if (this.copyData.length < 1) {
          let list = [];
          this.tableData.forEach(e => {
            list.push(e.pcConcId);
          });
          this.$refs["chooseStatementAll"].matLessList = list;
        }
        this.$refs["chooseStatementAll"].copyData = this.copyData;
        this.$refs["chooseStatementAll"].openDialog();
        this.$refs["chooseStatementAll"].init();
        // setTimeout(() => {
        //   this.$set(
        //     document.getElementsByClassName("el-table__empty-text")[0],
        //     "innerHTML",
        //     "没有相同的生产厂家/品牌，请重新选择"
        //   );
        //   document.getElementsByClassName(
        //     "el-table__empty-text"
        //   )[0].style.color = "red";
        // }, 100);
      } else {
        this.plMode = val;
        this.formPl = {};
        this.deliveryAreaOptions = [];
        this.provinceOptions = [];
        this.cityOptions = [];
        this.countyOptions = [];
        this.getQryAreaAddress();
        this.dialogFormVisible = true;
        // this.$refs["PlForm"].resetFields()
        // console.log("批量设置的校验",this.$refs.PlForm);
      }
    },
    // 选择清单
    chooseList() {
      this.$refs["contractDialog"].dialogTableVisibleTextarea = true;
      if (this.contractCode) {
        this.$refs["contractDialog"].contractCode = this.contractCode;
      }
    },
    generateUUID() {
      var d = new Date().getTime();
      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    }
  },
  mounted() {
    this.getUserInfo();
    this.$bus.$on("postContractCode", val => {
      this.contractCode = val;
    });
  }
};
</script>
<style scoped lang="scss">
.plClass {
  /deep/ .el-dialog {
    width: 40%;
  }
  /deep/ .el-dialog__body {
    display: flex;
    justify-content: center;
    padding: 35px 65px 35px 20px;
  }

  /deep/ .el-input {
    width: 165px;
    margin-right: 10px;
  }
}
/deep/ .el-table th.must > .cell:before {
  content: "*";
  color: #ff1818;
  margin-right: 5px;
}
/deep/.el-dropdown {
  display: inline-block;
  position: relative;
  color: #4a4a4a;
  font-size: 13px;
  margin-left: 10px;
  margin-right: 10px;
}

/deep/.el-button.el-button--single-number i {
  position: absolute;
  font-weight: 600;
  left: 75px;
  top: 8px;
  color: #5576cf;
}
/*/deep/.el-input__inner {*/
/*  background-color: #f1f1f5;*/
/*}*/
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc !important;
  }
}

::v-deep {
  .input-readonly.el-input.is-input-readonly.el-input--suffix {
    input {
      background-color: rgb(229, 229, 229);
      padding-right: 0px;
    }
  }
}
/*/deep/ .el-table__body-wrapper {*/
/*  z-index: 1;*/
/*}*/
::v-deep {
  .el-input input {
    padding-right: 50px;
  }
}
::v-deep {
  .currentNumClass.el-input {
    input {
      padding-right: 0px;
    }
  }
}
</style>
